<template>
	<view class="app-order-reservation-detail-address bg-white">
		<view class="e-flex e-flex-between e-font30 fw-600 e-m-b-20">
			<text>{{$t(`classify.${info.appointmentType === 2 ? '上门服务': '到店服务'}`) }}{{$t('common.:')}}</text>
			<view>
				<text>{{info.staffName}} / {{info.appointmentTime ? $timeFormat(info.appointmentTime,'mm-dd') :''}} / {{info.appointmentTimeStr}}</text>
			</view>
		</view>
		<view class="e-m-b-32" v-if="[2,3,-1].includes(info.state)">
			<text class="c-secondary">{{$t(`order.reservationOrderTips${info.state === -1 ? 2 :1 }`)}}</text>
		</view>
		<template v-else>
			<view>
				<view class="e-m-b-22 e-flex" v-if="info.appointmentType === 1">
					<view class="flex-1">
						<text class="c-secondary">{{$t('order.门店地址')}}{{$t('common.:')}}{{info.storeAddressDetail}}</text>
					</view>
					<image src="/static/nearby/navigation1.png" class="img-36 e-m-l-20" @tap="navigation"></image>
				</view>
				<view class="e-m-b-22" v-else>
					<text class="c-secondary">{{$t('classify.上门地址')}}{{$t('common.:')}}{{info.addressDetail}}</text>
				</view>
				<view class="e-flex-xy-center">
					<view class="app-order-reservation-detail-address__btn e-flex-xy-center e-flex-3" @tap="$goTo('/pages/order/reservation/info',{id:info.id})">
						<image src="/pages/order/static/reservation_icon1.png" class="img-40"></image>
						<text class="e-font-30 e-p-l-10">{{$t('msg.查看详情')}}</text>
					</view>
					<view class="app-order-reservation-detail-address__btn e-flex-xy-center e-flex-3" v-if="info.state === 0">
						<image src="/pages/order/static/reservation_icon2.png" class="img-40"></image>
						<text class="e-font-30 e-p-l-10">{{$t('order.修改预约')}}</text>
					</view>
					<view class="app-order-reservation-detail-address__btn e-flex-xy-center e-flex-3" v-if="info.state === 0">
						<image src="/pages/order/static/reservation_icon3.png" class="img-40"></image>
						<text class="e-font-30 e-p-l-10">{{$t('order.取消预约')}}</text>
					</view>
				</view>
			</view>
		</template>
		
	</view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
	name: 'order-store-address',
	// #ifdef MP-WEIXIN
	// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
	options: {
		virtualHost: true
	}
	// #endif
});
</script>
<script setup lang="ts">
import type { OrderItem } from '@/common/request/api';
import { useNavigation } from '@/common/hooks';

const props = withDefaults(
	defineProps<{
		info: OrderItem;
	}>(),
	{}
);

const { openNavigation } = useNavigation();

const navigation = () => {
	openNavigation({
		location: props.info.params.store.location.split(',') || [],
		title: props.info.storeName
	});
};
</script>

<style lang="scss" scoped>
	@include appBem_b(order-reservation-detail-address){
		border-radius:20rpx;
		overflow: hidden;
		padding:20rpx;
		@include appBem_e(btn){
			height:100rpx
		}
	}
</style>